<template>
  <div>
    <el-container>
      <el-header>
        <el-button v-if="changeBol" :icon="ArrowRight" @click="changeBol=false"></el-button>
        <el-button v-if="!changeBol" :icon="ArrowLeft"  @click="changeBol=true"></el-button>
      </el-header>

      <el-container>
        <el-aside>
          <mymenu :bol="changeBol"></mymenu>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>

      <el-footer>底部</el-footer>
    </el-container>
  </div>
</template>

<script setup lang="ts">
//引入菜单
import mymenu from './components/mymenu.vue';
import {
  ArrowLeft,
  ArrowRight
} from '@element-plus/icons-vue'
import {
  ref
} from 'vue';
let changeBol=ref(false)


</script>

<style scoped>
.el-header, .el-footer{
  height: 50px;background-color: #f88;color: #fff;
}
.el-aside{
  background-color: #999;height: calc(100vh - 120px); width: auto;
}
</style>